<template>
 <div class="forget_main" :style="{height:curHeight+'px',}" style="min-height: 600px">
  <a-row>
   <a-col :span="8"/>
   <a-col :span="8">
    <div class="forget_form">
       <div class="find_pass">
        <h4>填写新密码</h4>
         <router-link :to="{name:'login'}">想起密码，返回登陆</router-link>


        <a-form ref="formRegister" :form="form" id="formRegister" style="margin-top: 20px;">
         <a-popover
                 placement="rightTop"
                 :trigger="['focus']"
                 :getPopupContainer="(trigger) => trigger.parentElement"
                 v-model="state.passwordLevelChecked">
          <template slot="content">
           <div :style="{ width: '240px' }" >
            <div :class="['user-register', passwordLevelClass]">强度：<span>{{ passwordLevelName }}</span></div>
            <a-progress :percent="state.percent" :showInfo="false" :strokeColor=" passwordLevelColor " />
            <div style="margin-top: 10px;">
             <span>请至少输入 6 个字符。请不要使用容易被猜到的密码。</span>
            </div>
           </div>
          </template>
          <a-form-item>
           <a-input
                   size="large"
                   type="password"
                   @click="handlePasswordInputClick"
                   autocomplete="false"
                   placeholder="至少8位密码，区分大小写"
                   v-decorator="['password', {rules: [{ required: true, message: '至少6位密码，区分大小写'}, { validator: this.handlePasswordLevel }], validateTrigger: ['change', 'blur']}]"
           />
          </a-form-item>
         </a-popover>

         <a-form-item>
          <a-input
                  size="large"
                  type="password"
                  autocomplete="false"
                  placeholder="确认密码"
                  v-decorator="['password2', {rules: [{ required: true, message: '至少8位密码，区分大小写' }, { validator: this.handlePasswordCheck }], validateTrigger: ['change', 'blur']}]"
          />
         </a-form-item>
         <a-form-item>
          <a-button size="large" type="primary" htmlType="submit" class="submit_button" :loading="submitBtn"
                    @click.stop.prevent="handleSubmit" :disabled="submitBtn">重置密码
          </a-button>
         </a-form-item>
        </a-form>



        </div>
      </div>
    </a-col>
   <a-col :span="8"/>
  </a-row>
 </div>
</template>

<script>
 import {modfiyPass} from '@/api/login'
 import Vue from 'vue'
 const levelNames = {
  0: '低',
  1: '低',
  2: '中',
  3: '强'
 };
 const levelClass = {
  0: 'error',
  1: 'error',
  2: 'warning',
  3: 'success'
 };
 const levelColor = {
  0: '#ff0000',
  1: '#ff0000',
  2: '#ff7e05',
  3: '#52c41a'
 };
    export default {
        name: "changepassword",
     data(){
      return{
       form: this.$form.createForm(this),
       curHeight:0,
       state: {
        time: 60,
        smsSendBtn: false,
        passwordLevel: 0,
        passwordLevelChecked: false,
        percent: 10,
        progressColor: '#FF0000'
       },
       submitBtn: false
      }
     },computed: {
      passwordLevelClass () {
       return levelClass[this.state.passwordLevel]
      },
      passwordLevelName () {
       return levelNames[this.state.passwordLevel]
      },
      passwordLevelColor () {
       return levelColor[this.state.passwordLevel]
      }
     },
     created(){
      this.curHeight=document.body.clientHeight;
     },
     methods: {


      handlePasswordLevel (rule, value, callback) {
       let level = 0;

       // 判断这个字符串中有没有数字
       if (/[0-9]/.test(value)) {
        level++
       }
       // 判断字符串中有没有字母
       if (/[a-zA-Z]/.test(value)) {
        level++
       }
       // 判断字符串中有没有特殊符号
       if (/[^0-9a-zA-Z_]/.test(value)) {
        level++
       }
       this.state.passwordLevel = level;
       this.state.percent = level * 30;
       if (level >= 2) {
        if (level >= 3) {
         this.state.percent = 100
        }
        callback()
       } else {
        if (level === 0) {
         this.state.percent = 10
        }
        callback(new Error('密码强度不够'))
       }
      },

      handlePasswordCheck (rule, value, callback) {
       const password = this.form.getFieldValue('password');
       //console.log('value', value);
       if (value === undefined) {
        callback(new Error('请输入密码'))
       }
       if (value && password && value.trim() !== password.trim()) {
        callback(new Error('两次密码不一致'))
       }
       callback()
      },



      handlePasswordInputClick () {
       if (!this.isMobile) {
        this.state.passwordLevelChecked = true;
        return
       }
       this.state.passwordLevelChecked = false
      },

      handleSubmit () {
       const { form: { validateFields }, state,$router} = this;
       validateFields({ force: true }, (err,values) => {
        if (!err) {
         state.passwordLevelChecked = false;
         const passParams = { ...values }

         passParams.email=Vue.ls.get("email")
         //passParams.code=values.code
           console.log(passParams)
          modfiyPass(passParams).then(()=>{
          // console.log(reponse)
           Vue.ls.remove('email');
           $router.replace({ name: 'login'})

          }).catch()
        }
       })
      },

      requestFailed (err) {
       this.$notification['error']({
        message: '错误',
        description: ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试',
        duration: 4
       });
       this.registerBtn = false
      }
     },
     watch: {
      'state.passwordLevel' () {
       //console.log(val)
      }
     }



    }
</script>

<style scoped>
 .forget_main{
  width: 100%;
  min-width: 1200px;
  min-height: 100%;
  height: 100%;
  background-size: 100%;
  padding: 110px 0 144px;
  position: relative;
  background: #0c3eff url(~@/assets/background.svg) no-repeat 50% 50%;
 }
 .forget_form {

  width: 100%;
  min-width: 400px;
  height: 320px;
  background-color: #FFFFFF;
  border-radius: 4px;

 }
 .forget_form .find_pass{
  position: relative;
  width: 80%;
  height:280px;
  padding-top: 20px;
  margin: 0px auto;

 }
 .forget_form .find_pass h4{
  font-size: 18px;
  color: #42a5f5;
  text-align: center;
  width: 400px;
  margin: 0 auto;
 }
 .submit_button{
  width: 100%;

 }


</style>
